<script setup>

</script>

<template>
  <div class="container">
    <div class="event">
            <span><img src="@/components/icons/MikufansEvent.svg" alt="活动推荐">
            </span>
    </div>
    <div class="pick">
            <span><img src="@/components/icons/MikufansPick.svg" alt="作品推荐">
            </span>
    </div>
    <div class="interview">
            <span><img src="@/components/icons/MikufansInterview.svg" alt="Mikufans专访">
            </span>
    </div>
  </div>
</template>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  flex: 0 1 400px;
  padding: 40px 0;
}



.container > * {

  margin: 10px 0;
  padding: 10px 40px;
  border-right: 1px solid #333333;

}

span > img {
  height: 50px;
  vertical-align: bottom;
}

.container span {
  padding: 0 15px;
  font-size: 5px;
}

.container > :last-child {
  border-right: none;
}

.container > div:hover span {
  background-color: #fff;
}

.container > div:nth-child(1):active span {
  background: #7ac943;
}

.container > div:nth-child(2):active span {
  background: #39c5bb;
}

.container > div:nth-child(3):active span {
  background: #ffe211;
}
</style>